﻿@{
    ViewBag.Title = "用户管理";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@using Raffles.OA.Data;
@using Raffles.OA.Utility;
<style>
    .wrapper{
        position:inherit !important;
    }
</style>
<link href="~/Content/plugin/zTree/v3/css/metroStyle/metroStyle.min.css" rel="stylesheet" />
<link href="~/Content/plugin/jquery.layout/jquery.layout-latest.min.css" rel="stylesheet" />
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main" style="border-top: none">
            <div class="box-header" style="padding: 10px !important;">
                <div class="box-title">
                    组织架构
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnExpand" style="display:none;"><i class="fa fa-chevron-down"> 展开</i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse"><i class="fa fa-chevron-up"></i> 折叠</button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="departmentTree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>
<div class="ui-layout-center">
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="box-header" id="searchDiv">
                            <input type="hidden" id="departmentId" col="DepartmentId">
                            <div class="col-md-5 col-xs-12">
                                <div class="input-group">
                                    <div class="input-group-addon">用户信息</div>
                                    <input type="text" class="form-control" id="keyWord" col="KeyWord" placeholder="请输入用户账户或姓名">
                                </div>
                            </div>
                            <div class="col-md-5 col-xs-12">
                                <div class="input-group">
                                    <div class="input-group-addon">用户状态</div>
                                    <select id="EnabledMark" col="EnabledMark" class="form-control">
                                        <option value="">全部</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1 col-xs-12 text-center pull-right">
                                <a id="btnSearch" authorize="yes" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i> 搜索</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box box-info">
                    <div class="box-body">
                        <div class="table-responsive">
                            <div class="btn-group-sm" id="toolbar" role="group">
                                <a id="btnAdd" authorize="yes" class="btn btn-success" onclick="showForm('')"><i class="fa fa-plus"></i> 新增</a>
                                <a id="btnExport" authorize="yes" class="btn btn-warning" onclick="exportForm()"><i class="fa fa-download"></i> 导出</a>
                            </div>
                            <table id="gridTable" class="table table-hover table-striped text-nowrap">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div> 
<script src="~/Content/plugin/zTree/v3/js/ztree.min.js"></script>
<script src="~/Content/plugin/jquery.layout/jquery.layout-latest.min.js"></script> 
<script>

    $(function () {
        initTree();
        initGrid();
        $('.wrapper').layout({ west__size: 250 });
        $("#EnabledMark").frameSelect({
            data: frame.getJson(@Html.Raw(typeof(EnabledMarkEnum).EnumToDictionaryString()))
        });
        $('#btnExpand').click(function () {
            var tree = $.fn.zTree.getZTreeObj("departmentTree");
            tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function () {
            var tree = $.fn.zTree.getZTreeObj("departmentTree");
            tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });
    })
    function initTree() {
        $('#departmentTree').frameTree({
            url: '@Url.Content("/Manage/Department/GetDepartTreeSelect")',
            async: true,
            expandLevel: 2,
            maxHeight: "700px",
            callback: {
                onClick: function (event, treeId, treeNode) {
                    $("#departmentId").val(treeNode.id);
                    searchGrid();
                }
            }
        });
    }

    function initGrid() {
        $('#gridTable').frameTable({ 
            url: '@Url.Action("GetPageListJson", "User")',
            columns: [
                
                { field: 'Id', title: 'Id', visible: false },
                { field: 'Account', title: '用户账号', halign: "center", align: "center" },
                { field: 'RealName', title: '用户姓名', halign: "center", align: "center" }, 
                { field: 'OperateRate', title: '操作率', halign: "center", align: "center" }, 
                { field: 'DepartmentName', title: '所属部门', halign: "center", align: "center" },
                {
                    field: 'RoleName', title: '用户角色', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        return '<span class="label label-success">' + value + '</span> ';
                    }
                },
                {
                    field: 'EnabledMark', title: '用户状态', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (!!value) {
                            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="toggleStatus(\'' + row.Id + '\',false)"></i> ';
                        } else {
                            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="toggleStatus(\'' + row.Id + '\',true)"></i> ';
                        }
                    }
                },
                { field: 'CreatedOn', title: '创建时间', halign: "center", align: "center" },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a href="javascript:void(0);" authorize="yes" id="btnEdit" class="btn btn-primary btn-xs" onclick="showForm(\'' + row.Id + '\')"><i class="fa fa-edit"></i> 编辑</a> ');
                        actions.push('<a href="javascript:void(0);" authorize="yes" id="btnDelete" class="btn btn-danger btn-xs" onclick="deleteData(\'' + row.Id + '\')"><i class="fa fa-trash-o"></i> 删除</a> ');
                        actions.push('<a href="javascript:void(0);" authorize="yes" id="btnAuthorize" class="btn btn-info btn-xs" onclick="authorize(\'' + row.Id + '\')"><i class="fa fa-key"></i> 授权</a> ');
                        actions.push('<a href="javascript:void(0);" authorize="yes" id="btnReset" class="btn btn-warning btn-xs" onclick="resetPwd(\'' + row.Id + '\')"><i class="fa fa-key"></i> 重置密码</a>');
                        return actions.join('');
                    }
                }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTable').frameTable('getPagination', params);
                var queryString = $('#searchDiv').getWebControls(pagination);
                return queryString;
            }
        });
    }

    function searchGrid() {
        $('#gridTable').frameTable('search')
    }

    function showForm(id) {
        frame.openDialog({
            title: !!id ? '编辑用户' : '新增用户',
            content: '@Url.Content("/Manage/User/Form")' + '?id=' + id,
            width: '700px',
            height: '500px',
            callback: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.saveForm();
            }
        });
    }

    function deleteData(id) {
        frame.confirm("确定要删除该用户吗？", function () {
            frame.ajax({
                url: '@Url.Content("/Manage/User/DeleteData")' + '?id=' + id,
                type: "post",
                success: function (obj) {
                    if (obj.success) {
                        frame.msgSuccess(obj.message);
                        searchGrid();
                    }
                    else {
                        frame.msgError(obj.message);
                    }
                }
            });
        });
    }

    function resetPwd(id) {
        frame.confirm("确定要重置该用户密码为【123456】吗？", function () {
            frame.ajax({
                url: '@Url.Content("/Manage/User/ResetPwd")' + '?id=' + id,
                type: "post",
                success: function (obj) {
                    if (obj.success) {
                        frame.msgSuccess(obj.message);
                    }
                    else {
                        frame.msgError(obj.message);
                    }
                }
            });
        });
    }

    function toggleStatus(id, result) {
        frame.confirm("确定要" + (result?"启用":"禁用") + "该用户吗？", function () {
            frame.ajax({
                url: '@Url.Content("/Manage/User/ChangeStatus")' + '?id=' + id,
                type: "post",
                success: function (obj) {
                    if (obj.success) {
                        frame.msgSuccess(obj.message);
                        searchGrid();
                    }
                    else {
                        frame.msgError(obj.message);
                    }
                }
            });
        });
    }

     //导出
    function exportForm() {
        var url = '@Url.Content("/Manage/User/ExportUserJson")';
        var postData = $("#searchDiv").getWebControls();
        frame.exportExcel(url, postData);
    }

    function authorize(id) {
        frame.openDialog({
            title: '分配权限',
            content: '@Url.Content("/Manage/User/Authorize")' + '?userId=' + id,
            width: '500px',
            height: '450px',
            callback: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                iframeWin.saveForm();
            }
        });
    }
</script>